<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>eric_cyr&#39;s blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="eric_cyr&#39;s blog">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="eric_cyr&#39;s blog">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="eric_cyr">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="eric_cyr&#39;s blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">eric_cyr&#39;s blog</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">分享是程序员的第一美德</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-vue-组件通信" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/22/vue-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" class="article-date">
  <time datetime="2020-06-22T08:01:09.000Z" itemprop="datePublished">2020-06-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/22/vue-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/">vue 组件通信</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="父子组件的通信"><a href="#父子组件的通信" class="headerlink" title="父子组件的通信"></a>父子组件的通信</h2><h3 id="prop-和events"><a href="#prop-和events" class="headerlink" title="prop 和events"></a>prop 和events</h3><p>note：</p>
<ul>
<li><p>不应该在一个子组件里面改变props，会改变单项数据流，导致数据流难以理解，如果有这种需求，应该用data，computed接收</p>
</li>
<li><p>若props是引用类型，那么子组件对其的修改也会影响到父组件，故若有这种需求，可以用v-model或者.sync 实现</p>
</li>
</ul>
<h3 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h3><p><code>v-model</code> 是用来在表单控件或者组件上创建双向绑定的，他的本质是 <code>v-bind</code> 和 <code>v-on</code> 的语法糖，在一个组件上使用 <code>v-model</code>，<strong>默认会为组件绑定名为 <code>value</code> 的 <code>prop</code> 和名为 <code>input</code> 的事件</strong>。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">base-input</span> <span class="attr">v-model</span>=<span class="string">"input"</span>&gt;</span><span class="tag">&lt;/<span class="name">base-input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">        data() &#123;</span><br><span class="line"><span class="actionscript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">                input: <span class="string">''</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script</span><br><span class="line"><span class="actionscript">  <span class="comment">//父组件</span></span></span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; :value&#x3D;&quot;currentValue&quot;  @input&#x3D;&quot;handleInput&quot;&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        data() &#123;</span><br><span class="line">            return &#123;</span><br><span class="line">                currentValue: this.value &#x3D;&#x3D;&#x3D; undefined || this.value &#x3D;&#x3D;&#x3D; null ? &#39;&#39;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        props: &#123;</span><br><span class="line">            value: [String, Number],</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line">            handleInput(event) &#123;</span><br><span class="line">                const value &#x3D; event.target.value;</span><br><span class="line">                this.$emit(&#39;input&#39;, value);</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&#x2F;&#x2F;子组件</span><br></pre></td></tr></table></figure>

<p>有的时候，model默认绑定value的行为会有冲突，所以这时候vue可以用v-model的选项达到回避这种冲突</p>
<h3 id="sync"><a href="#sync" class="headerlink" title=".sync"></a>.sync</h3><p><code>.sync</code> 修饰符在 vue 1.x 的版本中就已经提供，1.x 版本中，当子组件改变了一个带有 <code>.sync</code> 的 <code>prop</code> 的值时，会将这个值同步到父组件中的值。这样使用起来十分方便，但问题也十分明显，这样破坏了单向数据流，当应用复杂时，debug 的成本会非常高。</p>
<p><strong>于是乎</strong>，在vue 2.0中移除了 <code>.sync</code>。但是在实际的应用中，<code>.sync</code> 是有它的应用场景的，所以在 vue 2.3 版本中，又迎来了全新的 <code>.sync</code>。</p>
<p>新的 <code>.sync</code> 修饰符所实现的已经不再是真正的双向绑定，它的本质和 <code>v-model</code> 类似，只是一种缩写。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;text-document</span><br><span class="line">  v-bind:title&#x3D;&quot;doc.title&quot;</span><br><span class="line">  v-on:update:title&#x3D;&quot;doc.title &#x3D; $event&quot;</span><br><span class="line">&gt;</span><br><span class="line">&lt;&#x2F;text-document&gt;</span><br></pre></td></tr></table></figure>

<p><code>sync</code>改写:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;text-document v-bind:title.sync&#x3D;&quot;doc.title&quot;&gt;&lt;&#x2F;text-document&gt;</span><br><span class="line">&#x2F;&#x2F;父组件</span><br><span class="line"></span><br><span class="line">this.$emit(&#39;update:title&#39;, newTitle)</span><br><span class="line">&#x2F;&#x2F;子组件调用</span><br></pre></td></tr></table></figure>





<h3 id="ref"><a href="#ref" class="headerlink" title="ref"></a>ref</h3><p>ref特性为子组件赋予一个id引用，通过这个id可以访问组件实例，父组件需要子组件的状态和方法时，可以使用<code>$ref</code>获取</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--父组件--&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;base-input ref&#x3D;&quot;baseInput&quot;&gt;&lt;&#x2F;base-input&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        methods: &#123;</span><br><span class="line">        focusInput: function () &#123;</span><br><span class="line">            this.$refs.usernameInput.focus()</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--子组件--&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;input ref&#x3D;&quot;input&quot;&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">    methods: &#123;</span><br><span class="line">        focus: function () &#123;</span><br><span class="line">            this.$refs.input.focus()</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<p>使用 ref 时，有两点需要注意</p>
<blockquote>
<ol>
<li><code>$refs</code> 是作为渲染结果被创建的，所以在初始渲染的时候它还不存在，此时无法无法访问。</li>
<li><code>$refs</code> 不是响应式的，只能拿到获取它的那一刻子组件实例的状态，所以要避免在模板和计算属性中使用它。</li>
</ol>
</blockquote>
<h4 id="parent-和-children"><a href="#parent-和-children" class="headerlink" title="$parent 和 $children"></a><strong>$parent 和 $children</strong></h4><p><code>$parent</code> 属性可以用来从一个子组件访问父组件的实例，<code>$children</code> 属性 可以获取当前实例的直接子组件。</p>
<p>看起来使用 <code>$parent</code> 比使用prop传值更加简单灵活，可以随时获取父组件的数据或方法，又不像使用 <code>prop</code> 那样需要提前定义好。但使用 <code>$parent</code> 会导致父组件数据变更后，很难去定位这个变更是从哪里发起的，所以在绝大多数情况下，不推荐使用。</p>
<p>在有些场景下，两个组件之间可能是父子关系，也可能是更多层嵌套的祖孙关系,这时就可以使用 <code>$parent</code>。</p>
<p>下面是 element ui 中的组件 el-radio-group 和 组件 el-radio 使用示例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt; </span><br><span class="line">&lt;el-radio-group v-model&#x3D;&quot;radio1&quot;&gt;  </span><br><span class="line">  &lt;el-radio :label&#x3D;&quot;3&quot;&gt;备选项&lt;&#x2F;el-radio&gt;  </span><br><span class="line">  &lt;component-1&gt;    </span><br><span class="line">    &lt;el-radio :label&#x3D;&quot;3&quot;&gt;备选项&lt;&#x2F;el-radio&gt;  </span><br><span class="line">  &lt;&#x2F;component-1&gt; </span><br><span class="line">  &lt;&#x2F;el-radio-group&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">&lt;script&gt; </span><br><span class="line">  export default &#123;    </span><br><span class="line">    data () &#123;     </span><br><span class="line">      return &#123;   </span><br><span class="line">        radio2: 3   </span><br><span class="line">      &#125;;    &#125; </span><br><span class="line">  &#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<p>在 el-radio-group 和 组件 el-radio 通信中， 组件 el-radio 的 value 值需要和 el-radio-group的 <code>v-model</code> 的值进行“绑定”，我们就可以在 el-radio 内借助 <code>$parent</code> 来访问到 el-radio-group 的实例，来获取到 el-radio-group 中 <code>v-model</code> 绑定的值。</p>
<p>下面是获取 el-radio 组件中获取 el-radio-group 实例的源码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// el-radio组件    </span></span><br><span class="line"><span class="keyword">let</span> parent = <span class="keyword">this</span>.$parent; </span><br><span class="line"><span class="keyword">while</span> (parent) &#123;   </span><br><span class="line">  <span class="keyword">if</span> (parent.$options.componentName !== <span class="string">'ElRadioGroup'</span>) &#123;     </span><br><span class="line">    parent = parent.$parent;    </span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;      </span><br><span class="line">    <span class="keyword">this</span>._radioGroup = parent; <span class="comment">// this._radioGroup 为组件 el-radio-group 的实例   </span></span><br><span class="line">  &#125;   </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="非父子组件的通信"><a href="#非父子组件的通信" class="headerlink" title="非父子组件的通信"></a>非父子组件的通信</h2><p><code>$attr</code> <code>$listener</code></p>
<figure class="highlight plain"><figcaption><span>```inject```</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### eventBus</span><br><span class="line"></span><br><span class="line">eventBus 可以实现任意两个组件之前的通信</span><br><span class="line"></span><br><span class="line">原理：在两个组件内部都引入同一个vue实例，然后再两个组件中分别调用这个实例的事件触发和监听实现通信</span><br><span class="line"></span><br><span class="line">&#96;&#96;&#96;js</span><br><span class="line">import Vue from &#39;vue&#39;</span><br><span class="line">export default new Vue()</span><br><span class="line">&#x2F;&#x2F;eventbus.js</span><br></pre></td></tr></table></figure>



<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> bus <span class="keyword">from</span> <span class="string">'eventbus.js'</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span>&#123;</span></span><br><span class="line">    methods:&#123;</span><br><span class="line">sayHello()&#123;</span><br><span class="line"><span class="actionscript">  bus.$emit(<span class="string">'sayhello'</span>,<span class="string">'hello'</span>)</span></span><br><span class="line">&#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="actionscript">  <span class="comment">//componentA</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  import bus from &#39;eventbus.js&#39;</span><br><span class="line">  export default&#123;</span><br><span class="line">    created()&#123;</span><br><span class="line">     bus.$on(&#39;sayhello&#39;,target&#x3D;&gt;&#123;</span><br><span class="line">       console.log(target) &#x2F;&#x2F;&#x3D;&gt;&#39;hello&#39;</span><br><span class="line">&#125;)</span><br><span class="line">      </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;componentb</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>



<h3 id="root"><a href="#root" class="headerlink" title="root"></a>root</h3><p>通过this.$root拿到当前组件树的根实例</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/22/vue-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/" data-id="ckbq7rmlo0008ig1lelnkbt7w" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-njuoj-递归查询子字符串" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/njuoj-%E9%80%92%E5%BD%92%E6%9F%A5%E8%AF%A2%E5%AD%90%E5%AD%97%E7%AC%A6%E4%B8%B2/" class="article-date">
  <time datetime="2020-06-14T14:01:44.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/14/njuoj-%E9%80%92%E5%BD%92%E6%9F%A5%E8%AF%A2%E5%AD%90%E5%AD%97%E7%AC%A6%E4%B8%B2/">njuoj 递归查询子字符串</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p> 思路：每次将pos映射到对称区间的相应位置。直到达到[1,5]区间</p>
<p>其中需要注意的是，需要找到$的分布规律。单独处理</p>
<p>package com.company.dp;</p>
<p>import java.util.ArrayList;<br>import java.util.List;<br>import java.util.Scanner;</p>
<p>public class 递归查询子字符串 {<br>    public static void main(String[] args) {<br>        Scanner scanner=new Scanner(System.in);<br>        int case_num=Integer.parseInt(scanner.nextLine());<br>        for (int i = 0; i &lt; case_num; i++) {<br>            long pos=Long.parseLong(scanner.nextLine());<br>            char res=getNum(pos);<br>            System.out.println(res);<br>        }<br>        scanner.close();<br>    }</p>
<pre><code>private static char getNum(long pos) {
    long[] s=new long[50];
    s[0]=5;
    for (int i = 1; i &lt; s.length; i++) {
        s[i]=s[i-1]*2+i;

    }
    for (int i = 0; i &lt; s.length; i++) {
        System.out.println(s[i]);
    }

    String str0=&quot;12345&quot;;

    while(pos&gt;5){
        for (int i = 1; i &lt; s.length; i++) {
            if(pos&gt;=s[i-1]&amp;&amp;pos&lt;=s[i]){

                if(2*pos-s[i]&gt;=0&amp;&amp;2*pos-s[i]&lt;=i)return &apos;$&apos;;
                pos=s[i]-pos+1;
                break;
            }

        }

    }
    return str0.charAt(((int) pos)-1);

}</code></pre><p>}</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/njuoj-%E9%80%92%E5%BD%92%E6%9F%A5%E8%AF%A2%E5%AD%90%E5%AD%97%E7%AC%A6%E4%B8%B2/" data-id="ckbq7rmll0005ig1l6oo1456k" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-foo-bar-的故事" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/foo-bar-%E7%9A%84%E6%95%85%E4%BA%8B/" class="article-date">
  <time datetime="2020-06-14T14:00:05.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/14/foo-bar-%E7%9A%84%E6%95%85%E4%BA%8B/">foo bar 的故事</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>有些朋友问：foo, bar是什么意思, 为什么C++书籍中老见到这个词。我google了一下， 发现没有很好的中文答案。这个问题，在维基百科上有很好的回答。在这里翻译给大家。</p>
<p>译文：</p>
<p>　　术语foobar, foo, bar, baz 和qux经常在计算机编程或计算机相关的文档中被用作占位符的名字。当变量，函数，或命令本身不太重要的时候，foobar, foo, bar, baz 和qux就被用来充当这些实体的名字，这样做的目的仅仅是阐述一个概念，说明一个想法。这些术语本身相对于使用的场景来说没有任何意义。Foobar经常被单独使用；而当需要多个实体举例的时候，foo，bar，和baz则经常被按顺序使用。</p>
<p>原文：</p>
<p>　　The terms foobar, foo, bar, baz and qux are sometimes used as placeholder names (also referred to as metasyntactic variables) in computer programming or computer-related documentation. They have been used to name entities such as variables, functions, and commands whose purpose is unimportant and serve only to demonstrate a concept. The words themselves have no meaning in this usage. Foobar is sometimes used alone; foo, bar, and baz are sometimes used in that order, when multiple entities are needed.</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/foo-bar-%E7%9A%84%E6%95%85%E4%BA%8B/" data-id="ckbq7rmlk0003ig1l01553g0o" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-pwa" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/pwa/" class="article-date">
  <time datetime="2020-06-14T13:59:22.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/14/pwa/">pwa</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>一、背景<br>从2018年到现在，作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如</p>
<ol>
<li><p>昂贵开发成本</p>
</li>
<li><p>软件上线，版本更新都需要发布到不同的商店，并通过审核</p>
</li>
</ol>
<p>有些APP你可能使用频率特别少，但是你还是不得不去商店中下载庞大安装包，或者可能一段时间不使用以后，随着版本的更新，你也不得不去重新更新并安装</p>
<p>PWA技术的作为web应用，其天生优势能很好的解决以上的问题。</p>
<p>二. 什么是PWA<br>PWA是Progressive Web App的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。</p>
<p>引用官方介绍：</p>
<p>Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience.<br>即是：</p>
<ol>
<li>可靠——即时加载，即使在不确定的网络条件下也不会受到影响。<br>当用户从主屏幕启动时，service work可以立即加载渐进式Web应用程序，完全不受网络环境的影响。service work就像一个客户端代理，它控制缓存以及如何响应资源请求逻辑，通过预缓存关键资源，可以消除对网络的依赖，确保为用户提供即时可靠的体验。</li>
</ol>
<p>可靠<br>2. 快速<br>据统计，如果站点加载时间超过 3s，53% 的用户会放弃等待。页面展现之后，用户期望有平滑的体验，过渡动画和快速响应。</p>
<p>快速<br>3. 沉浸式体验—— 感觉就像设备上的原生应用程序，具有沉浸式的用户体验。<br>渐进式Web应用程序可以安装并在用户的主屏幕上，无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验，甚至可以重新与用户接触的Web推送通知。</p>
<p>沉浸式体验<br>Web应用程序中，可以通过manifest.json控制应用程序的显示方式和启动方式，指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向，甚至可以指定是否显示浏览器Chrome。<br>根据官方的介绍，不难看出，pwa的目标直指原生app，那接下来我们就来了解下PWA到底是个怎么样的何方神圣。</p>
<p>三. 核心功能<br>PWA并不是单指某一项技术，你更可以把它理解成是一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。</p>
<p>PWA中包含的核心功能及特性如下：<br>Web App Manifest<br>Service Worker<br>Cache API 缓存<br>Push&amp;Notification 推送与通知<br>Background Sync 后台同步<br>响应式设计<br>四. PWA如何弥补和原生App的差距<br>性能差异<br>PWA使用app Shell架构模型</p>
<ol>
<li>快速加载</li>
<li>尽可能使用较少的数据</li>
<li>使用本机缓存中的静态资产</li>
<li>将内容与导航分离开来</li>
<li>检索和显示特定页面的内容（HTML、JSON 等）</li>
<li>缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容，但同时不影响网络的可链接性和可检测性。 用户下次访问您的应用时，应用会自动显示最新版本。无需在使用前下载新版本。<br>为了保证首屏的加载，在内容请求完成之前，可以优先保证 App Shell 的渲染，做到和 Native App 一样的体验，App Shell 是 PWA 界面展现所需的最小资源。<br>无法离线使用</li>
</ol>
<p>Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技术实现离线加载和缓存<br>数据更新</p>
<p>Background Sync 后台同步技术<br>无法实现推送</p>
<p>Push&amp;Notification 实现推送与通知<br>无法添加到桌面</p>
<p>通过manifest.json文件配置，使得可以直接添加到手机的桌面上。<br>天生优势：</p>
<ol>
<li>无需安装，无需下载，只要你输入网址访问一次，然后将其添加到设备桌面就可以持续使用。</li>
<li>发布不需要提交到app商店审核</li>
<li>更新迭代版本不需要审核，不需要重新发布审核</li>
<li>现有的web网页都能通过改进成为PWA， 能很快的转型，上线，实现业务、获取流量</li>
<li>不需要开发Android和IOS两套不同的版本</li>
</ol>
<p>劣势：</p>
<ol>
<li>游览器对技术支持还不够全面， 不是每一款游览器都能100%的支持所有PWA</li>
<li>需要通过第三方库才能调用底层硬件（如摄像头）</li>
<li>PWA现在还没那么火，国内一些手机生产上在Android系统上做了手脚，似乎屏蔽了PWA, 但是相信当PWA火起来以后，这个问题就不会是问题</li>
</ol>
<p>五. PWA的发展趋势<br>2016年， PWA在google正式落地，基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了<br>随着 iOS 11.3 的发布，iOS正式开始支持PWA<br>Windows Edge 支持PWA</p>
<p>随着越来越多的游览器大厂，相继的对PWA做出了支持和优化，想必PWA的时代即将到来</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/pwa/" data-id="ckbq7rmln0007ig1lbpnv1ka9" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-背包问题总结" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/" class="article-date">
  <time datetime="2020-06-14T13:58:50.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/14/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/">背包问题总结</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/" data-id="ckbq7rmlq000big1lfx7e6hqo" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-Dp题目-通配符匹配" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/Dp%E9%A2%98%E7%9B%AE-%E9%80%9A%E9%85%8D%E7%AC%A6%E5%8C%B9%E9%85%8D/" class="article-date">
  <time datetime="2020-06-14T13:57:50.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/14/Dp%E9%A2%98%E7%9B%AE-%E9%80%9A%E9%85%8D%E7%AC%A6%E5%8C%B9%E9%85%8D/">Dp题目 通配符匹配</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>思路:</p>
<p>思路一: 利用两个指针进行遍历。</p>
<p>在代码里解释.</p>
<p>时间复杂度为:O(mn)O(mn)O(mn)</p>
<p>思路二: 动态规划</p>
<p>dp[i][j]表示s到i位置,p到j位置是否匹配!</p>
<p>初始化:</p>
<pre><code>dp[0][0]:什么都没有,所以为true
第一行dp[0][j],换句话说,s为空,与p匹配,所以只要p开始为*才为true
第一列dp[i][0],当然全部为False</code></pre><p>动态方程:</p>
<pre><code>如果(s[i] == p[j] || p[j] == &quot;?&quot;) &amp;&amp; dp[i-1][j-1] ,有dp[i][j] = true

如果p[j] == &quot;*&quot; &amp;&amp; (dp[i-1][j] = true || dp[i][j-1] = true) 有dp[i][j] = true

​ note:

​ dp[i][j-1],表示*代表是空字符,例如ab,ab*

​ dp[i-1][j],表示*代表非空任何字符,例如abcd,ab*</code></pre><p>​</p>
<p>class Solution {<br>    public boolean isMatch(String s, String p) {<br>        int sn = s.length();<br>        int pn = p.length();<br>        int i = 0;<br>        int j = 0;<br>        int start = -1;<br>        int match = 0;<br>        while (i &lt; sn) {<br>            if (j &lt; pn &amp;&amp; (s.charAt(i) == p.charAt(j) || p.charAt(j) == ‘?’)) {<br>                i++;<br>                j++;<br>            } else if (j &lt; pn &amp;&amp; p.charAt(j) == ‘<em>‘) {<br>                start = j;<br>                match = i;<br>                j++;<br>            } else if (start != -1) {<br>                j = start + 1;<br>                match++;<br>                i = match;<br>            } else {<br>                return false;<br>            }<br>        }<br>        while (j &lt; pn) {<br>//plan b<br>class Solution {<br>    public boolean isMatch(String s, String p) {<br>        boolean[][] dp = new boolean[s.length() + 1][p.length() + 1];<br>        dp[0][0] = true;<br>        for (int j = 1; j &lt; p.length() + 1; j++) {<br>            if (p.charAt(j - 1) == ‘</em>‘) {<br>                dp[0][j] = dp[0][j - 1];<br>            }<br>        }<br>        for (int i = 1; i &lt; s.length() + 1; i++) {<br>            for (int j = 1; j &lt; p.length() + 1; j++) {<br>                if (s.charAt(i - 1) == p.charAt(j - 1) || p.charAt(j - 1) == ‘?’) {<br>                    dp[i][j] = dp[i - 1][j - 1];<br>                } else if (p.charAt(j - 1) == ‘*’) {<br>                    dp[i][j] = dp[i][j - 1] || dp[i - 1][j];<br>                }<br>            }<br>        }<br>        return dp[s.length()][p.length()];</p>
<pre><code>}</code></pre><p>}</p>
<p>if (p.charAt(j) != ‘*’) return false;<br>            j++;<br>        }<br>        return true;</p>
<pre><code>}</code></pre><p>}</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/Dp%E9%A2%98%E7%9B%AE-%E9%80%9A%E9%85%8D%E7%AC%A6%E5%8C%B9%E9%85%8D/" data-id="ckbq7rmlj0002ig1lbin2al3j" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-黑客与画家" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/%E9%BB%91%E5%AE%A2%E4%B8%8E%E7%94%BB%E5%AE%B6/" class="article-date">
  <time datetime="2020-06-14T13:55:47.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/14/%E9%BB%91%E5%AE%A2%E4%B8%8E%E7%94%BB%E5%AE%B6/">黑客与画家</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>黑客与画家</p>
<p>首先说说我看完这本书最直观的感受，就是这是我读过翻译水平最高的人邮的书。然后一看译者，阮一峰。我居然认识这个人。。（当然他不认识我）。上财经济学博士，但同时又可能是国内最有才华的十个coder之一。是国内最早一批javascript技术的开拓者和布道者。技术书籍的翻译在国内属于高付出低回报的事情。同时注意到作者，paul graham。有很多头衔，硅谷创业之父种种。</p>
<pre><code>这本书虽然没有任何具体的技术介绍，但是却很能引发技术人思考。

第一章居然是解释为什么书呆子不受欢迎，这是一种很高明的手段。程序员大部分就是作者所说的nerd，在12到18岁的经历大多不是那么美好。一方面与广大的coder达到了一种默契。另一方面和之后的黑客精神形成对比。从人畜无害，木讷的技术宅到不服从管教的黑客。 那些不服从管教的人们，是这个社会力量与财富的源泉，是的，现在很少有人关心这些了，大家更关心房子和油价，粮食和蔬菜。</code></pre><p>从利己角度来说，强烈建议每一个从学校即将毕业的人，或是所有的技术人都先读一下这本书的第六章，”如何创造财富”(How to Make Wealth)，技术人有必要建立起对财富的价值观。说到”财富”，似乎是很让人不齿的事情，但是又是看到周围有很多技术人热衷谈论股票、炒房，谁让我们生活在这个糟糕的时代呢？少有人同时谈谈财富和技术的关系，还好有这本书。金钱只是财富的一种表达方式，但财富不等于金钱，不止是房子与车子。Paul Graham 的观点是：致富的最好办法是创造财富（而不是掠夺），自己创业或是加入创业团队是致富的可靠方法(就我来看，如果你是官二代或是富二代，那么另当别论)。Paul 与那些常见的忽悠大师不同的地方在于，他同时也会给出稍显冰冷的事实：创业的付出与回报总体上是成比例的，但是在个体上是不成比例的，不要把创业过于神话，但创业的确给了我们更多的可能。</p>
<p>给我带来不小启发的还有关于 “不能说的话” 的论述。身处当前这种复杂的社会环境中，如果你发现了这个社会的某种禁忌–你肯定会发现的，发现了不能说的话，怎么办？最恰当的办法是挑选合适的场合再说，而不是到处去说，我们要学会”只打值得打的仗”。想想我们平时在网上耗费大量精力而做的口水战，难道不是么无谓之争么？别去赞同这个社会任何一种歇斯底里，但是又不告诉他们你具体不赞同哪种狂热。如果不得不面对这样的挑衅，要么将争论提升到一个抽象的层次－实际上这比较难；要么，使用隐喻－这也不容易，作者还提示了一个办法，那就是幽默(他妈的, 这家伙太有意思了)。如果自己是潮水的一部分，你无法看清潮水的方向，唯一的办法是永远保持质疑，提升自己的思辨能力。</p>
<p>事实上，这本书在国内出版后还可能有两个后果：</p>
<p>会有更多人产生创业的想法（记住，是创造财富而非掠夺财富） 会产生更多的 LISP 程序员（中国有多少个 LISP 程序员？两位数还是三位数?）</p>
<p>后果自负 :)</p>
<p>领一个话是如果你有两个选择，就选择比较难的那个。</p>
<p>首先，这句话看似很鸡汤，但重点是这句话不是用来看的，而是用来做的，你知道的，鸡汤总是叫你转移看待事物的眼光，例如从苦难中看到辉煌，从挫折看到胜利……总而言之，鸡汤文不负责解决问题，而这句话却是能解决问题的。</p>
<p>其次，这句话应该加一个前提，完整版应该是这样的：如果你有两个选择，两个选择都可以达到同样的效果，你就应该选择较难的那个。</p>
<blockquote>
<p>当然，我不是说如果你有两个女朋友，你就应该选择较丑的那个，以正常人的眼光来看，明显就是取到漂亮老婆的的幸福感高一点，但如果你觉得你是诸葛亮那样的人，那也没办法，可是黄月英他爹是个名士，而这位名士又是豪门的女婿，哎呀，好复杂，总之，大家都是聪明人，就不细说了。</p>
</blockquote>
<p>最后，这句话不是我说的，我的人生经验还没有丰富到让我提出如此老辣的人生建议，这句话是硅谷创业教父Pual Graham在《黑客与画家》里面说的。</p>
<p>Pual Graham在书中举了三个例子：</p>
<p>一个是他创业公司viaweb的事情，他说，「选择公司要解决什么问题应该以问题的难度作为指引，而且此后的各种决策都应该以此为原则。」这句话简单地翻译过来就是：遇到问题就应该迎难而上。</p>
<blockquote>
<p>viaweb公司的一条经验法则：假定你是一个手脚敏捷的小男孩，身后有一条壮硕的大狗正在追你。你跑到楼梯口，这时应该上楼还是下楼？我觉得应该上楼。如果下楼的话，大狗可能跑得跟你一样快。上楼的话，大狗的庞大身躯就将成为劣势。不错，跑上楼你会比较吃力，但是大狗会感到更吃力。</p>
</blockquote>
<p>此时你再想想电影或者小说中的场面：假如主角被追杀，他面对两条路，一条是平坦的大道，另一条是人迹罕至的荆棘丛，电影中的人物总是选择那条更加复杂，风险更大的小路，不是因为电影或小说中设定就是如此，而是走更加危险的小路生存的几率更大，君不见主角掉进山涧获得武功秘籍，冲进瀑布之后得到高人指点，正所谓大难不死必有后福。</p>
<p>以上的例子是从生存策略方面的考虑，而下一个例子就是从竞争对手的角度来考虑。</p>
<blockquote>
<p>假定软件有两个候选的新功能，它们创造的商业价值完全相同，那么我们总是选择较困难的那个功能。不是因为这个功能能带来更多的收入，而是因为它比较难。我们很乐于迫使那些又大又慢的竞争对手跟着我们一起走进沼泽地。 &gt; &gt;创业公司就像游击队一样，喜欢选择不易生存的深山老林作为根据地，政府的正规军无法追到那种地方。我还记得创业初期我们是多么筋疲力尽，整天都为一些可怕的技术难题绞尽脑汁。但是，我还是感到相当高兴，因为那些问题连我们都觉得这么困难，那么竞争对手就更会认为是不可能解决的。</p>
</blockquote>
<p>大公司极其厌恶风险，他们大多不愿意进入风险更大的领域，如果你愿意，那就是你的机会。</p>
<p>最后的一个，也就是最重要的例子，是关于切切实实关乎个人的操作性很高的例子。</p>
<blockquote>
<p>如果你要选择是坐在家里看电视，还是外出跑步，那就出去跑步吧。这个方法有效的原因可能是遇到两个一难一易的选择时，往往出于懒惰的缘故，你会选择较易的那个选项。在意识深处，你其实知道不懒惰的做法会带来更好的结果，这个方法只是迫使你接受这一点。</p>
</blockquote>
<p>如果你一直都是一个失败者，那你就应该一直选择做容易的事情，因为容易的选择太容易做了。</p>
<p>选择容易那并不能代表你的决定很正确，只能代表你有小聪明，小聪明是用来掩盖懒惰的，是用来逃避问题的，你要向前走，就必须走出艰难的一步。</p>
<p>过一个平凡无趣的人生实在太容易了，你可以不读书，不冒险，不运动，不写作，不外出，不折腾……但是，人生最后悔的事情就是：我本可以。选择困难的事情，你可以知道你的人生可以走到多远。</p>
<p>可是，无趣有多容易，有趣就多困难，你自己选吧。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/%E9%BB%91%E5%AE%A2%E4%B8%8E%E7%94%BB%E5%AE%B6/" data-id="ckbq7rmlp000aig1l3gsj4pp0" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-react-loadable-简单实现" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/react-loadable-%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0/" class="article-date">
  <time datetime="2020-06-14T13:47:53.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/14/react-loadable-%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0/">react loadable 简单实现</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="什么是react-loadable"><a href="#什么是react-loadable" class="headerlink" title="什么是react-loadable"></a>什么是react-loadable</h2><p>npm desc：<br>A higher order component for loading components with dynamic imports.<br>一个异步加载component的高阶组件</p>
<h2 id="组件拆分"><a href="#组件拆分" class="headerlink" title="组件拆分"></a>组件拆分</h2><p>做路由拆分可以达到一定程度的性能优化，loadable本质上做的事组件拆分<br><img src="http://thejameskyle.com/img/react-loadable-split-bundles.png" alt=""></p>
<h3 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Loadable <span class="keyword">from</span> <span class="string">'react-loadable'</span>;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> LoadableBar = Loadable(&#123;</span><br><span class="line">  loader: <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'./components/Bar'</span>),</span><br><span class="line">  loading() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Loading...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">LoadableBar</span>/&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>##简易实现<br>基本思路，在组件和页面之间加一层代理，通过文件异步加载实现懒加载</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> loadable = <span class="function">(<span class="params">&#123; loader, loading: Loading &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="title">loadableComponent</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    state = &#123;</span><br><span class="line">      LoadedComponent: <span class="literal">null</span></span><br><span class="line">    &#125;;</span><br><span class="line">    componentDidMount() &#123;</span><br><span class="line">      <span class="comment">//loader是一个函数 执行import操作</span></span><br><span class="line">      loader().then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(res.default);</span><br><span class="line">        <span class="keyword">this</span>.setState(&#123; <span class="attr">LoadedComponent</span>: res.default &#125;);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    render() &#123;</span><br><span class="line">      <span class="keyword">const</span> &#123; LoadedComponent &#125; = <span class="keyword">this</span>.state;</span><br><span class="line">      <span class="keyword">return</span> LoadedComponent ? <span class="xml"><span class="tag">&lt;<span class="name">loadedComponent</span> /&gt;</span></span> : <span class="xml"><span class="tag">&lt;<span class="name">Loading</span> /&gt;</span></span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> loadable;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/react-loadable-%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0/" data-id="ckbq7rmlm0006ig1l6tp97nr4" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-函数式编程-curry化" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/01/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B-curry%E5%8C%96/" class="article-date">
  <time datetime="2020-06-01T07:30:04.000Z" itemprop="datePublished">2020-06-01</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/06/01/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B-curry%E5%8C%96/">函数式编程---curry化</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/01/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B-curry%E5%8C%96/" data-id="ckbq7rmlo0009ig1l28g1hp58" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-flex-布局的一些整理和技巧" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/05/24/flex-%E5%B8%83%E5%B1%80%E7%9A%84%E4%B8%80%E4%BA%9B%E6%95%B4%E7%90%86%E5%92%8C%E6%8A%80%E5%B7%A7/" class="article-date">
  <time datetime="2020-05-24T13:26:48.000Z" itemprop="datePublished">2020-05-24</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/05/24/flex-%E5%B8%83%E5%B1%80%E7%9A%84%E4%B8%80%E4%BA%9B%E6%95%B4%E7%90%86%E5%92%8C%E6%8A%80%E5%B7%A7/">flex 布局的一些整理和技巧</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/05/24/flex-%E5%B8%83%E5%B1%80%E7%9A%84%E4%B8%80%E4%BA%9B%E6%95%B4%E7%90%86%E5%92%8C%E6%8A%80%E5%B7%A7/" data-id="ckbq7rmld0000ig1lbdl1cj7g" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">Next &amp;raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/06/">June 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">May 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2020/06/22/vue-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/">vue 组件通信</a>
          </li>
        
          <li>
            <a href="/2020/06/14/njuoj-%E9%80%92%E5%BD%92%E6%9F%A5%E8%AF%A2%E5%AD%90%E5%AD%97%E7%AC%A6%E4%B8%B2/">njuoj 递归查询子字符串</a>
          </li>
        
          <li>
            <a href="/2020/06/14/foo-bar-%E7%9A%84%E6%95%85%E4%BA%8B/">foo bar 的故事</a>
          </li>
        
          <li>
            <a href="/2020/06/14/pwa/">pwa</a>
          </li>
        
          <li>
            <a href="/2020/06/14/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/">背包问题总结</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 eric_cyr<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>